<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MediathekViewWeb</title>
    <style>
      .browser-warning {
        opacity: 0;
        animation: fadeIn 0.5s 1s forwards;
      }

      @keyframes fadeIn {
        to {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body class="m-0 min-h-screen bg-gray-100 text-gray-700 dark:bg-gray-900 dark:text-gray-300">
    <div id="browserWarning" class="browser-warning border-2 border-red-500 p-4 rounded-md m-4">
      <span><span class="underline text-red-700 dark:text-red-400">Dein Browser wird nicht unterstützt</span> oder Javascript ist deaktiviert</span>
      <br />
      <span>
        Falls du ein von den regulären Browsern nicht mehr unterstütztes System verwendest, könnte möglicherweise der Browser <a class="text-blue-500 hover:underline" href="https://win32subsystem.live/supermium/">Supermium</a> abhilfe
        schaffen.
      </span>
    </div>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
